<template>
  <footer
    id="spell-footer"
    class="xl-hidden h15 fixed bottom-0 w100% backdrop-blur-10"
    flex="~ justify-center items-center"
  >
    <span class="item" @click="handleNavigate(0)" flex="~ grow justify-center items-center">
      <IconHome class="w6" />
    </span>
    <span class="item" @click="handleNavigate(1)" flex="~ grow justify-center items-center">
      <IconUser class="w5" />
    </span>
    <div class="plus-btn">
      <IconPlus @click="clickPlus" class="text-black w100%" />
    </div>
  </footer>
</template>

<script setup lang="ts">
import IconHome from '@/components/icons/IconHome.vue'
import IconUser from '@/components/icons/IconUser.vue'
import IconPlus from '@/components/icons/IconPlus.vue'
import router from '@/router'
const handleNavigate = (index: number) => {
  console.log('handleNavigate', index)
  switch (index) {
    case 0:
      // home
      break
    case 1:
      // user
      break

    default:
      break
  }
}
const clickPlus = () => {
  console.log('clickPlus')
}
</script>

<style lang="scss" scoped>
#spell-footer {
  background-color: rgba($color: #000000, $alpha: 0.6);
  user-select: none;
  .item {
    color: white;
  }
  .plus-btn {
    position: absolute;
    width: 2.25rem;
    height: 2.25rem;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
